$leftContainerWidth:220px;
$centerContainerWidth:750px;
$rightContainerWidth:230px;



.banner{
	width:$centerContainerWidth;
	height:491px;
	float:left;
	.banner-slider{
		margin-top: 10px;
		margin-left: 10px;
		width: $centerContainerWidth - 10px;
		height: 323px;
		background:url(../app/assets/images/banner1.png) center center no-repeat;
	}
	.banner-showbar{
		margin-top: 20px;
		margin-left: 10px;
		width: $centerContainerWidth - 10px;
		height: 138px;
		background:url(../app/assets/images/banner2.png) center center no-repeat;
	}
}

.right-sidebar{
	width:$leftContainerWidth;
	height:auto;
	float:left;
	font-size:14px;
	overflow:hidden;

	.extra-block{
		margin-top: 10px;
		margin-left: 10px;
		overflow: hidden;
		width: $leftContainerWidth - 10px;
		background:#fff;
		color:#333;
		padding-bottom: 2px;
		dl{
			width: 100%;
			display: block;
			overflow: hidden;
			border-bottom:1px solid #f2f2f2;
			dd{
				width: 50px;
				height: 35px;
				line-height: 35px;
				font-size: 14px;
				float: left;
				text-align: center;
				&.active{
					color:$ActiveColor;
				}
			}
		}
		ul{
			li{
				width: 100%;
				line-height: 26px;
				height:26px;
				text-indent: 10px;
			}
		}
	}
	.user-block{
		margin-top: 10px;
		margin-left: 10px;
		overflow: hidden;
		width: $leftContainerWidth - 10px;
		background:#fff;
		a{
			width: 80px;
			height: 86px;
			display: block;
			float: left;
			img{
				width: 60px;
				height: 60px;
				margin:13px 10px;
			}
		}
		.user-info{
			float: left;
			width: $leftContainerWidth - 100px;
			padding-left:10px;
			height: 86px;
			text-align: left;
			font-size: 12px;
			background:url(../app/assets/images/userinfo-icon.png) bottom right no-repeat;
			h2{
				margin:0;
				line-height: 20px;
				color: $ActiveColor;
				margin-top: 22px;
				font-size: 12px;
			}
			p{
				color: #666666;
				font-size: 12px;
			}
		}
		.user-operate{
			width: 100%;
			height: 36px;
			background:#fafafa;
			float: left;
			border-top:1px solid #f2f2f2;
			border-bottom:1px solid #f2f2f2;
			position: relative;
			&:before{
				content:'|';
				position:absolute;
				top: 8px;
				left: 50%;
				color:#e1e1e1;
			}
			.operate-btn{
				width: 50%;
				height: 36px;
				float: left;
				a{
					display: block;
					margin:5px;
					width: 95px;
					height: 26px;
					line-height: 26px;
					font-size: 14px;
					color: $ActiveColor;
					text-align: center;
					cursor: pointer;
					&:hover{
						background:$ActiveColor;
						color:#fff;
					}
				}
			}
		}
	}
}

.left-sidebar{
	width:$leftContainerWidth;
	height:auto;
	float:left;
	background:#FFF;
	font-size:14px;
	padding-top:10px;
	ul{
		li{
			padding:9px 20px;
			cursor: pointer;
			position: relative;
			i{
				float: right;
				opacity: 0;
			}
			&:hover{
				background: $ActiveColor;
				color:#FFF;
				i{
					opacity: 1;
				}
				.service-item{
					display: block;
				}
			}
		}
		.service-item{
			display: none;
			position:absolute;
			top: 0;
			left: 220px;
			width: $centerContainerWidth;
			height: 477px;
			background: #FFF;
			border:2px solid $ActiveColor;
			.service-item-line{
				margin:5px 20px;
				border-bottom:1px dashed #DDD;
				overflow: hidden;
				dt,dl{
					width: 100%;
					height: 30px;
					line-height: 30px;
				}
				dt{
					color: #333;
					font-size: 14px;
					font-weight: bold;
				}
				dd{
					float: left;
					color: #666;
					font-size: 12px;
					width: 50px;
					text-align: left;
					a{
						display: block;
						&:hover{
							text-decoration: underline;
							color: $ActiveColor;
						}
					}
				}
			}
			h1{
			   width: 100%;
			   text-indent: 20px;
			   height: 43px;
			   line-height: 43px;
			   font-weight: bold;
			   font-size: 18px;
			   color:$ActiveColor;
			}
		}

	}
}






.floor{
	margin-top:16px;
	position:relative;
	h1{
		width: $leftContainerWidth + $rightContainerWidth + $centerContainerWidth - 45px;
		padding-left:42px;
		text-align: left;
		position:relative;
		color: $ActiveColor;
		line-height: 33px;
		height: 33px;
		border-bottom:2px solid $ActiveColor;
		font-size: 16px;
		span{
			color: #333333;
			font-weight: normal;
		}
		i{
			display: block;
			width: 33px;
			height: 33px;
			line-height: 33px;
			color:#FFF;
			text-align: center;
			background:$ActiveColor;
			position: absolute;
			left: 0;
			top: 0;
			font-size: 18px;
			font-weight: normal;
		}
	}
}

$moduleBlockHeight:110px;

.floor-content{
	.left{
		float: left;
		width: $leftContainerWidth;
		height: $leftContainerWidth + $moduleBlockHeight;
 		img{
 			width: $leftContainerWidth;
 			height: $leftContainerWidth;
 			overflow: hidden;
 		}
 		.module-info{
 			width: $leftContainerWidth;
 			height: $moduleBlockHeight;
 			background:#f2f2f2;
 			text-indent: 20px;
 			h2{
 				width: 100%;
 				height: 40px;
 				line-height: 40px;
 				text-align: left;
 				color: $ActiveColor;
 				font-size:20px;
 				margin:0;
 			}
 			p{
				font-size: 14px;
				height: 30px;
				line-height: 30px;
 			}
 		}
	}
	.center{
		float: left;
		width: $rightContainerWidth;
		height: $leftContainerWidth + $moduleBlockHeight;
		.service-item-line{
			width: $rightContainerWidth - 20px;
			padding:5px 10px;
			background:#fff;
			font-size: 12px;
	
			dl,dt{
				width: 100%;
				display: block;
			}
			dl{
				border-bottom:1px dashed #e7e7e7;
			}
			dt{
				color: #333;
				float: left;
				height: 30px;
				line-height: 30px;
				font-weight:bold;
			}
			dd{
				width: 40px;
				float: left;
				font-size: 12px;
				height: 25px;
				line-height: 25px;
				color:#666;
				cursor: pointer;
			}
			&>dl:last-child{
				border-width:0;
			}
		}
	}
	.right{
		float: left;
		width: $centerContainerWidth - 1px;
		height: $leftContainerWidth + $moduleBlockHeight;
		border-left:1px solid #f8f8f8;
		ul{
			li{
				float: left;
				width: 148px;
				height: 166px;
				border-left:1px solid #f8f8f8;
				border-bottom:1px solid #f8f8f8;
				background:#fff;
				&.active{
					width:446px;
				}
			}
			&>li:last-child{
				border-right-width:0;
			}
		}
	}
}